<template>
<div class="cardBox">

    <div class="container">

        <img class="inner" src="../../../assets/memberImg/inner.png" alt="">

        <img v-if="param.type == 0" class="center" src="../../../assets/memberImg/lan.png" alt="">
        <img v-if="param.type == 1" class="center" src="../../../assets/memberImg/jcard.png" alt="">
        <img v-if="param.type == 2" class="center" src="../../../assets/memberImg/baij.png" alt="">
        <img v-if="param.type == 3" class="center" src="../../../assets/memberImg/zhuan.png" alt="">

        <img class="outer" src="../../../assets/memberImg/outer.png" alt="">
        <div class="content" v-show="isShow">
            <div class="num">
                <span>{{cardNo}}</span>
            </div>
            <div class="qrcode">
                <div v-if="param.type == 0" style="color:#ffffff">
                    {{cardName}}
                </div>

                <div v-if="param.type == 1" style="color:#b09544">
                    {{cardName}}
                </div>

                <div v-if="param.type == 2" style="color:#8c8f9b">
                    {{cardName}}
                </div>

                <div v-if="param.type == 3" style="color:#b1b1b1">
                    {{cardName}}
                </div>
                <div class="codebox">
                    <img src="../../../assets/memberImg/qrcode.png" style="width:20px;height:20px" alt="">
                    <span>广州曙光医学美容医院</span>
                </div>
            </div>
            <div class="jifen">
                <span style="font-size:14px;font-weight:400;color:#8b89b4">会员积分</span>
                <span style="font-size:14px;font-weight:400;color:#eadfa5;margin-left:5px">{{jifen}}</span>
            </div>
        </div>

    </div>

    <div class="menu">
        <div @click="jump(item)" v-for="(item,index) in list" :key="index" class="item">
            <img :src="item.url" alt="">
            <span>{{item.name}}</span>
        </div>
    </div>

    <div class="menu">
        <div @click="jump(item)" v-for="(item,index) in list1" :key="index" class="item">
            <img :src="item.url" alt="">
            <span>{{item.name}}</span>
        </div>
    </div>

     <!-- <div class="menu">
        <div  @click="jump(item)" v-for="(item,index) in list2" :key="index" class="item">
            <img v-if="item.url" :src="item.url" alt="">
            <span v-if="item.url">{{item.name}}</span>
        </div>
    </div> -->

    <!-- <div class="menu">
        token: {{param.token}}
        cartType: {{param.type}}
        fuid: {{param.fuid}}
    </div> -->

</div>
</template>

<script>
import {
    toast
} from "../../../utils/toast.js"
import {
    getRequest
} from '../../../utils/index.js'

import {
    login
} from '../../../sgApi/index.js'
export default {
    name: "centerParter",
    props: {
        cardInfo: {
            type: Object,
            default: {}
        }
    },
    watch: {
        cardInfo: {
            handler(newV, oldV) {
                this.myCardInfo = newV
                console.log("myCardInfo", this.myCardInfo)

                //  customer_level_name,customerCardNo,customerJFAmt
                if (newV.customer_level == 0) {
                    this.cardName = "蓝卡"
                }
                if (newV.customer_level == 1) {
                    this.cardName = "金卡"
                }

                if (newV.customer_level == 2) {
                    this.cardName = "铂金卡"
                }

                if (newV.customer_level == 3) {
                    this.cardName = "钻石卡"
                }

                this.cardNo = newV.customerCardNo
                this.jifen = newV.customerJFAmt
                this.param.type = newV.customer_level
            },
            deep: true
        }
    },
    data() {
        return {
            isShow: false,

            list: [{
                    url: require("../../../assets/memberImg/yuyue.png"),
                    name: "在线预约",
                    pageUrl:"/noninvasive"
                },
                {
                    url: require("../../../assets/memberImg/jifen.png"),
                    name: "自助挂号"
                },
                {
                    url: require("../../../assets/memberImg/tijian.png"),
                    name: "体检报告",
                    pageUrl: "/physical"
                },
                {
                    url: require("../../../assets/memberImg/dangan.png"),
                    name: "治疗档案",
                    pageUrl: "/archives"

                },
            ],
            list1: [{
                    url: require("../../../assets/memberImg/quanyi.png"),
                    name: "会员权益"
                },
                {
                    url: require("../../../assets/memberImg/guahao.png"),
                    name: "卡券钱包",
                    pageUrl: "/bill"
                },
                {
                    url: require("../../../assets/memberImg/pianhao.png"),
                    name: "个人偏好"
                },
                {
                    url: require("../../../assets/memberImg/shenmi.png"),
                    name: "神秘顾客",
                    pageUrl: "/mysteryCustomer"
                },
            ],

            list2:[
                {
                    url: require("../../../assets/memberImg/quanyi.png"),
                    name: "礼品鉴定",
                    pageUrl:"/giftCheck"
                },
                {},{},{}
                
            ],

            myCardInfo: {},
            param: {},
            cardName: "",
            cardNo: "",
            jifen: ""
        }
    },
    mounted() {

        // setTimeout(()=>{
        //     this.myCardInfo=this.cardInfo

        // },200)
        // login().then(res=>{

        // })
        // let param = getRequest()

        // console.log("param", param)
        setTimeout(() => {
            this.isShow = true
        }, 800)
    },
    methods: {
        jump(item) {
            if (item.hasOwnProperty("pageUrl")) {

                // console.log(item.pageUrl)

                this.$router.replace({
                    path: item.pageUrl
                })
            } else {
                toast({
                    message: "即将上线,敬请期待!",
                    time: 2000
                })
            }

        }
    }

}
</script>

<style lang="scss" scoped>
@import './centerParter.scss';
</style>
